<script>
	/*
单线程与异步

- JS是单线程编程语言, 只能同时做一件事
- js引擎是在一个线程(可以称为JS线程)上解析执行js代码的(web worker除外), 无论是同步代码还是异步代码
- 界面第一次渲染:
  初始化同步代码 ==> 所有的微任务==> 渲染界面==> 执行第一个宏任务
- 界面更新渲染:
  所有的微任务==> 渲染界面==> 执行第一个宏任务

总结: 清空微队列中所有微任务 ==> 渲染界(UI线程) ==> 执行宏队列中的第一个宏任务
- 浏览器在另一个线程(GUI渲染线程)进行页面渲染操作,

- GUI渲染线程与js线程是互斥(不会同时执行),
因为 JS 可以修改 DOM 结构
- 遇到需要等待 (网络请求, 定时任务) 不能卡住
- 需要异步
- 回调callback函数
  */
	/*
  页面挂载和页面渲染
      挂载:将DOM节点添加到html中
      渲染:将html中的内容绘制到页面上,给用户进行观看

  解析js代码:需要js线程执行
  渲染页面:需要GUI线程执行
      注意:js线程与GUI线程互斥,不能同时执行

  首次渲染流程:主线程代码执行结束->清空微任务队列->GUI线程渲染->执行宏任务
  更新渲染流程:清空微任务队列->GUI线程渲染->执行宏任务

  浏览器的挂载操作是同步操作,渲染操作是异步操作
      */
</script>
<ul>
	<li>aaa</li>
	<li>bbb</li>
	<li>ccc</li>
</ul>
<button id="test">test</button>
<div id="content">aaaaaaa</div>
<script>
	Promise.resolve().then(() => {
		// 微任务
		alert("promise1");
	});
	Promise.resolve().then(() => {
		// 微任务
		alert("promise2");
	});
	setTimeout(() => {
		// 宏任务
		alert(document.getElementById("content").innerHTML);
	}, 0);
	document.getElementById("test").onclick = () => {
		// 宏任务
		document.getElementById("content").innerHTML = "xxxx"; // dom渲染
		Promise.resolve().then(() => {
			// 微任务
			alert("promise3");
		});
		setTimeout(() => {
			// 宏任务
			alert(document.getElementById("content").innerHTML);
		}, 0);
	};
</script>
